<template>
  <div>
    <page-header title="维修订单列表">
      <n-button type="primary">新增</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-grid x-gap="12" :cols="24">
        <n-gi :span="5">
          <n-input clearable placeholder="请输入订单编号" />
        </n-gi>
        <n-gi :span="5">
          <n-select
            value-field="id"
            label-field="name"
            clearable
            placeholder="请选择店铺"
          />
        </n-gi>
        <n-gi :span="5">
          <n-select clearable placeholder="请选择订单状态" />
        </n-gi>
        <n-gi :span="6">
          <n-date-picker
            type="daterange"
            clearable
            start-placeholder="订单创建开始时间"
            end-placeholder="订单创建结束时间"
          />
        </n-gi>
        <n-gi :span="3" class="flex justify-end">
          <n-radio-group name="radiobuttongroup1">
            <n-radio-button label="卡片" />
            <n-radio-button label="表格" />
          </n-radio-group>
        </n-gi>
      </n-grid>
      <div class="mt-[16px]">
        <n-spin :show="dataLoading">
          <!-- 卡片 -->
          <n-grid x-gap="12" y-gap="12" :cols="24">
            <template v-if="orderList.length">
              <n-gi
                v-for="item in orderList"
                :span="6"
                :key="item.id"
                class="flex justify-end"
              >
                <n-card
                  class="cursor-pointer"
                  hoverable
                  size="small"
                  :title="`#${item.num}`"
                  @click.stop="handleNavToDetail(item.id)"
                >
                  <template #action>
                    <n-select
                      class="w-full"
                      :options="[{ label: '待维修', value: 1 }]"
                    />
                  </template>
                  <n-space vertical>
                    <div class="flex items-center">
                      <span class="text-base text-black">{{
                        item.variantName
                      }}</span>
                    </div>
                    <div class="flex items-center">
                      <n-icon size="18" class="text-gray-500">
                        <Person />
                      </n-icon>
                      <span class="pl-1 text-gray-500">
                        {{ item.customerName }}
                      </span>
                    </div>
                    <div class="flex items-center">
                      <n-icon size="18" class="text-gray-500">
                        <PhonePortraitOutline />
                      </n-icon>
                      <span class="pl-1 text-gray-500">
                        {{ item.customerPhoneNumber }}
                      </span>
                    </div>
                    <div class="flex items-center">
                      <n-icon size="18" class="text-gray-500">
                        <TimeOutline />
                      </n-icon>
                      <span class="pl-1 text-gray-500">
                        {{ item.orderDate }}
                      </span>
                    </div>
                  </n-space>
                </n-card>
              </n-gi>
            </template>
            <n-gi v-else :span="24">
              <n-empty />
            </n-gi>
          </n-grid>

          <basic-pagination
            :total="paginationResult.total"
            :page="paginationResult.page"
            :pageSize="paginationResult.pageSize"
          />
        </n-spin>
        <!-- 表格 -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { get } from "lodash-es";
import dayjs from "dayjs";
import { Person, PhonePortraitOutline, TimeOutline } from "@vicons/ionicons5";
import * as RouterNames from "@/router/routerNames/index";

import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import { getRepairOrderList } from "@/api/repair/repair.api";

const router = useRouter();

const { tableResult, paginationResult, getDataList } = useTableHook<any>({
  api: getRepairOrderList,
  queryForm: {
    status: undefined,
    createTimeRange: null,
    branchId: undefined,
  },
  beforeFetch: (params) => {
    if (params.createTimeRange) {
      const [start, end] = params.createTimeRange;
      console.log(params);
      if (start) {
        params.createTime_begin = dayjs(start).format("YYYY-MM-DD 00:00:00");
      }

      if (end) {
        params.createTime_end = dayjs(end).format("YYYY-MM-DD 23:59:59");
      }
    }
  },
});

const orderList = computed(() => {
  return get(tableResult, "data") || [];
});

const dataLoading = computed(() => {
  return get(tableResult, "loading") || false;
});

const handleNavToDetail = (id: string) => {
  router.push({
    name: RouterNames.REPAIR_ORDER_DETAIL_PAGE.NAME,
    params: { id },
  });
};

const init = () => {
  getDataList();
  console.log();
};

onMounted(() => {
  init();
});
</script>
